<!--<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js01</title>
		<!--预加载文档-->
		<!--head标签中-->

		<!--<script type="text/javascript">
			
			
			//文档对象模型
			window.onload=function(){
				var obj=document.getElementById("obj01");
				obj.style.color = '#00f';
				obj.style.border = '1px solid red';
			}
			
		</script>-->
		
		
		
	<!--</head>-->
	<!--<body>-->
<!--		<p id="obj01">请把我改为蓝色，制定边框</p>-->
		<!--1引入标签 获取对象 实现操作-->
		<!--请在div中添加文本：我是div盒子
		<div id="box">
			
		</div>
		请在文本框中添加我是文本框
		<input type="text" name="" id="txtbox" value="" />
		<script type="text/javascript">
			var box=document.getElementById("box");
			var box=document.getElementsByTagName('div')/*[0]*/;
			alert(box[0]);
			var txtbox=document.getElementById('txtbox');
			box[0].innerHTML = '我是div盒子';
			txtbox.value ='我是文本框';
			
		</script>-->
		<!--引入js
		获取div盒子
		获取文本框标签
		在div盒子中写入指定的内容
		在文本框中写入指定的内容-->
		<!--<div id="box">
			改变
		</div>
		<button onclick="ChangeColor()">红色</button>
		<button onclick="ChangeBorder()">边框</button>
		<button onclick="ChangeScale()">变大</button>
		
		<script type="text/javascript">
			var myDiv=document.getElementsById("box")[0];

			function ChangeColor(){
				myDiv.style.color="red";
			}

			function ChangeBorder(){
				myDiv.style.border="2px solid black";
			}
			function ChangeScale(){
				var cur=parseInt(window.getComputedStyle(myDiv).fontSize);
				var new=cur+10;
				myDiv.style.fontSize=new+10;
			}
			


		</script>
	</body>-->
<!--</html>-->





<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
  <title>样式改变示例</title>
  <style>
    #myDiv {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      text-align: center;
      line-height: 100px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="myDiv">改变</div>
  <button onclick="changeColor()">红色</button>
  <button onclick="changeBorder()">边框</button>
  <button onclick="changeSize()">变大</button>

  <script>
    var myDiv = document.getElementById("myDiv");

    function changeColor() {
      myDiv.style.color = "red";
    }

    function changeBorder() {
      myDiv.style.border = "2px solid black";
    }

    function changeSize() {
      var currentSize = parseInt(window.getComputedStyle(myDiv).fontSize);
      var newSize = currentSize + 10;
      myDiv.style.fontSize = newSize + "px";
    }
  </script>
</body>
</html>

